<template>
    <div class="qr-code-generator">
        <img :src="qrCodeImage" alt="QR Code" />
    </div>
</template>

<script>
import QRCode from "qrcode";

export default {
    props: {
        input: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            qrCodeImage: '', // 存储生成的二维码图像数据
        };
    },
    methods: {
        generateQRCode() {
            QRCode.toDataURL(this.input, { width: 80 }, (error, url) => {
                if (error) {
                    console.error(error);
                } else {
                    this.qrCodeImage = url; // 更新 qrCodeImage
                }
            });
        },
    },
    mounted() {
        this.generateQRCode(); // 初始化时生成二维码
    },
    watch: {
        input() {
            this.generateQRCode(); // 监听 input 变化并重新生成二维码
        }
    }
};
</script>

<style scoped>
.qr-code-generator {
    text-align: center;
    margin: 20px;
}
</style>
